<template>
  <picker
    class="pickerList"
    @change="pickerAccountChange"
    mode="multiSelector"
    :range="newCategotyDataList"
    :value="multiIndex"
    range-key="Display"
    @columnchange="pickerColumnchange"
  >
    <text class="account">{{ curUserAccount?.Display }}</text></picker
  >
</template>

<script lang="ts" setup>
import type { UserAccount } from '@/types/detail'
import { onInit, onLoad, onShow } from '@dcloudio/uni-app'
import { onMounted, onUpdated, ref, type Ref } from 'vue'

const multiIndex = ref([0, 0, 0])
const newCategotyDataList = ref<string[][]>([[], [], []])

// 定义 props 接收数据
const query = defineProps<{
  userAccounts: UserAccount[]
  curUserAccount: UserAccount
}>()

const pickerColumnchange = (e: any) => {
  // 第几列滑动
  // console.log(e.detail.column);
  // 第几列滑动的下标
  // console.log(e.detail.value)
  // 第一列滑动
  if (e.detail.column === 0) {
    multiIndex.value[0] = e.detail.value
    // console.log('第一列滑动');
    var selectUserName = newCategotyDataList.value[0][e.detail.value]
    InitSelect1(selectUserName)
    var selectAccountTypeName = newCategotyDataList.value[1][0]
    InitSelect2(selectUserName, selectAccountTypeName)
    // 第一列滑动  第二列 和第三列 都变为第一个
    multiIndex.value.splice(1, 1, 0)
    multiIndex.value.splice(2, 1, 0)
  }
  // 第二列滑动
  if (e.detail.column === 1) {
    multiIndex.value[1] = e.detail.value
    // console.log('第二列滑动');
    // console.log(this.multiIndex)
    var selectUserName1 = newCategotyDataList.value[0][multiIndex.value[0]]
    var selectAccountTypeName1 = newCategotyDataList.value[1][multiIndex.value[1]]
    InitSelect2(selectUserName1, selectAccountTypeName1)
    // 第二列 滑动 第三列 变成第一个
    multiIndex.value.splice(2, 1, 0)
  }
  // 第三列滑动
  if (e.detail.column === 2) {
    multiIndex.value[2] = e.detail.value
    // console.log('第三列滑动')
    // console.log(this.multiIndex)
  }
}

//初始化账号下拉选择第二列
const InitSelect1 = (selectUserName: string) => {
  if (query.userAccounts) {
    newCategotyDataList.value[1] = []
    for (let i = 0; i < query.userAccounts.length; i++) {
      var curUserName = query.userAccounts[i].UserName
      var accountTypeName = query.userAccounts[i].AccountTypeName
      if (selectUserName == curUserName) {
        var exist1 = newCategotyDataList.value[1].find((o) => o == accountTypeName)
        if (!exist1) {
          newCategotyDataList.value[1].push(accountTypeName)
          if (accountTypeName == query.curUserAccount.AccountTypeName) {
            multiIndex.value.splice(1, 1, newCategotyDataList.value[1].length - 1)
          }
        }
      }
    }
  }
}
//初始化账号下拉选择第三列
const InitSelect2 = (selectUserName: string, selectAccountTypeName: string) => {
  if (query.userAccounts) {
    newCategotyDataList.value[2] = []
    for (let i = 0; i < query.userAccounts.length; i++) {
      var curUserName2 = query.userAccounts[i].UserName
      var curAccountTypeName2 = query.userAccounts[i].AccountTypeName
      var accountCard2 = query.userAccounts[i].AccountCard
      if (selectUserName == curUserName2 && selectAccountTypeName == curAccountTypeName2) {
        newCategotyDataList.value[2].push(accountCard2)
        if (accountCard2 == query.curUserAccount.AccountCard) {
          multiIndex.value.splice(2, 1, newCategotyDataList.value[2].length - 1)
        }
      }
    }
  }
}
const init = async () => {
  if (query.userAccounts) {
    for (let i = 0; i < query.userAccounts.length; i++) {
      var userName = query.userAccounts[i].UserName
      var exist = newCategotyDataList.value[0].find((o) => o == userName)
      if (!exist) {
        newCategotyDataList.value[0].push(userName)
      }
    }
    for (let i = 0; i < newCategotyDataList.value.length; i++) {
      if (newCategotyDataList.value[0][i] == query.curUserAccount.UserName) {
        multiIndex.value.splice(0, 1, i)
      }
    }
  }
  InitSelect1(query.curUserAccount.UserName)
  InitSelect2(query.curUserAccount.UserName, query.curUserAccount.AccountTypeName)
}
//选择账户
const pickerAccountChange = (e: any) => {
  multiIndex.value = e.detail.value
  var selectUserName1 = newCategotyDataList.value[0][multiIndex.value[0]]
  var selectAccountTypeName1 = newCategotyDataList.value[1][multiIndex.value[1]]
  var selectAccount = newCategotyDataList.value[2][multiIndex.value[2]]

  var userAccount = query.userAccounts.find(
    (o) =>
      o.UserName == selectUserName1 &&
      o.AccountTypeName == selectAccountTypeName1 &&
      o.AccountCard == selectAccount,
  )
  emit('change', userAccount!)
}
onShow(async () => {
  console.log('Picker_触发onShow')
  await init()
})

const emit = defineEmits<{
  (event: 'change', userAccount: UserAccount): void
}>()
</script>
<style scoped>
.account {
  height: 80rpx;
  margin: 0 10rpx;
  padding: 10rpx 20rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 60rpx;
  font-size: small;
  background-color: #fdc3bc;
}
.account:active {
  color: #686767;
}
</style>
